/* 

    定义常用尺寸，位置

 */

@import './variables.less';

@rem: @mobel-ratio*(@moble-width/10);



/* 设置宽高 */

.w(@num) {
    .width(true) {
        width: unit(@num/@rem, rem);
    }
    .width(false) {
        width: unit(@num, px);
    }
    .width(@support-rem);
}

.h(@num) {
    .height(true) {
        height: unit(@num/@rem, rem);
    }
    .height(false) {
        height: unit(@num, px);
    }
    .height(@support-rem);
}



/* 单行文本垂直居中 */

.cline(@height) {
    height: unit(@height, px);
    line-height: unit(@height, px);
}



/* 设置margin */

.mt(@num) {
    .margin(true) {
        margin-top: unit(@num/@rem, rem);
    }
    .margin(false) {
        margin-top: unit(@num, px);
    }
    .margin(@support-rem);
}

.mr(@num) {
    .margin(true) {
        margin-right: unit(@num/@rem, rem);
    }
    .margin(false) {
        margin-right: unit(@num, px);
    }
    .margin(@support-rem);
}

.mb(@num) {
    .margin(true) {
        margin-bottom: unit(@num/@rem, rem);
    }
    .margin(false) {
        margin-bottom: unit(@num, px);
    }
    .margin(@support-rem);
}

.ml(@num) {
    .margin(true) {
        margin-left: unit(@num/@rem, rem);
    }
    .margin(false) {
        margin-left: unit(@num, px);
    }
    .margin(@support-rem);
}

/* 设置padding */

.pt(@num) {
    .padding(true) {
        padding-top: unit(@num/@rem, rem);
    }
    .padding(false) {
        padding-top: unit(@num, px);
    }
    .padding(@support-rem);
}

.pr(@num) {
    .padding(true) {
        padding-right: unit(@num/@rem, rem);
    }
    .padding(false) {
        padding-right: unit(@num, px);
    }
    .padding(@support-rem);
}

.pb(@num) {
    .padding(true) {
        padding-bottom: unit(@num/@rem, rem);
    }
    .padding(false) {
        padding-bottom: unit(@num, px);
    }
    .padding(@support-rem);
}

.pl(@num) {
    .padding(true) {
        padding-left: unit(@num/@rem, rem);
    }
    .padding(false) {
        padding-left: unit(@num, px);
    }
    .padding(@support-rem);
}

/* 设置位置 */

.t(@num) {
    .top(true) {
        top: unit(@num/@rem, rem);
    }
    .top(false) {
        top: unit(@num, px);
    }
    .top(@support-rem);
}

.r(@num) {
    .right(true) {
        right: unit(@num/@rem, rem);
    }
    .right(false) {
        right: unit(@num, px);
    }
    .right(@support-rem);
}

.b(@num) {
    .bottom(true) {
        bottom: unit(@num/@rem, rem);
    }
    .bottom(false) {
        bottom: unit(@num, px);
    }
    .bottom(@support-rem);
}

.l(@num) {
    .left(true) {
        left: unit(@num/@rem, rem);
    }
    .left(false) {
        left: unit(@num, px);
    }
    .left(@support-rem);
}

/* 顺时针margin，padding，定位, */

.clockhand(@values, @prefix: ~"", @collapse: false) {
    // 定义arg的长度
    @l: length(@values);
    @p: -;
    .map(1) {
        @top: unit(extract(@values, 1), px);
        @right: unit(@top, px);
        @bottom: unit(@top, px);
        @left: unit(@top, px);
    }
    .map(2) {
        @top: unit(extract(@values, 1), px);
        @right: unit(extract(@values, 2), px);
        @bottom: unit(@top, px);
        @left: unit(@right, px);
    }
    .map(3) {
        @top: unit(extract(@values, 1), px);
        @right: unit(extract(@values, 2), px);
        @bottom: unit(extract(@values, 3), px);
        @left: unit(@right, px);
    }
    .map(4) {
        @top: unit(extract(@values, 1), px);
        @right: unit(extract(@values, 2), px);
        @bottom: unit(extract(@values, 3), px);
        @left: unit(extract(@values, 4), px);
    }
    .map(@l);
    .reduce() when (@collapse) {
        .output() {
            @shorthand: @top;
        }
        .output() when not (@right =@top) {
            @shorthand: @top @right;
        }
        .output() when not (@bottom =@top) {
            @shorthand: @top @right @bottom;
        }
        .output() when not (@left =@right) {
            @shorthand: @top @right @bottom @left;
        }
        .output();
        @{prefix}: @shorthand;
    }
    .reduce() {
        .output() when not (@top =_) {
            top: @top;
        }
        .output() when not (@right =_) {
            right: @right;
        }
        .output() when not (@bottom =_) {
            bottom: @bottom;
        }
        .output() when not (@left =_) {
            left: @left;
        }
        .output();
    }
    .reduce();
}

.absolute(...) {
    position: absolute;
    .clockhand(@arguments);
}

.fixed(...) {
    position: fixed;
    .clockhand(@arguments);
}

.relative(...) {
    position: relative;
    .clockhand(@arguments);
}

.padding(...) {
    .clockhand(@arguments, padding, true);
}

.margin(...) {
    .clockhand(@arguments, margin, true);
}